import { MenuFoldOutlined, MenuUnfoldOutlined, CaretDownOutlined } from '@ant-design/icons'
import { Layout, Button, Avatar, Dropdown, Space } from 'antd'
import { useDispatch } from 'react-redux'
import { collapseMenu } from './../../store/reducers/tab'
import HeaderImg from '../../assets/image/header.png'

import './index.css'
const { Header } = Layout

function CommonHeader({ collapse }) {
  const items = [
    {
      key: '1',
      label: '个人中心'
    },
    {
      key: '2',
      label: '退出'
    }
  ]

  const dispatch = useDispatch()
  // 点击展开收起按钮
  const updateCollapsed = () => {
    dispatch(collapseMenu())
  }

  return (
    <Header style={{ padding: 0 }}>
      <Button
        type='text'
        icon={collapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => updateCollapsed()}
        style={{
          fontSize: '16px',
          width: 64,
          height: 64
        }}
      />
      <Dropdown menu={{ items }}>
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            <Avatar src={<img alt='头像' src={HeaderImg} />} />
            <CaretDownOutlined style={{ color: '#999' }} />
          </Space>
        </a>
      </Dropdown>
    </Header>
  )
}

export default CommonHeader
